<template>
  <div
    class="mt-4 text-center bg-gray-100 p-4 rounded-lg relative"
    :class="select ? 'border-green border-2' : ''"
  >
    <div
      v-if="$slots.label"
      class="absolute -top-3 text-white text-xs py-1 px-3 rounded-md bg-green"
    >
      <slot name="label"></slot>
    </div>
    <div class="flex items-center justify-center">
      <span class="text-green text-xl font-bold">
        <slot name="title"></slot>
      </span>
      <span class="ml-1">
        <slot name="subtitle"></slot>
      </span>
    </div>
    <div class="font-semibold">
      <slot name="content"></slot>
    </div>
    <div class="text-gray-400 text-sm mt-1">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: ["select", "label"],
  created() {
    // console.log(this.hot);
  },
};
</script>

<style>
</style>